<template>
	<view class="content">
		<view  class="my-service-title" @click="handleNavBarBack">
			<uv-icon name="arrow-left" size="30rpx" color="#fff"></uv-icon>
		</view>
		
		<view class="header">鸣谢企业</view>
		<!-- <view class="letter-text">企业首字母，排名不分先后</view> -->
		
		<view class="card">
		  <view v-for="(group, groupIndex) in groupedExperts" :key="groupIndex">
		    <!-- 显示首字母标题 -->
		    <view class="letter-header">
		      {{ group.letter }}<text class="text">（企业首字母，排名不分先后）</text>
		    </view>
		    
		    <!-- 遍历该分组下的专家 -->
		    <view class="list">
				<view class="item" v-for="(item, index) in group.items" :key="index">
					<view class="img">
						<image :src="item.img" style="width: 100%;" mode="widthFix" v-if="item.img"></image>
						<text v-else>{{ item.name }}</text>
					</view>
					<view class="name">{{ item.name }}</view>
				</view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script setup>
	import {onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import { ref, computed } from 'vue';
	
	const logoData = ref([
		{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/AstraZeneca.png',
			'name':'AstraZeneca',
			"firstLetter": "A"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/roche.png',
			'name':'上海罗氏',
			"firstLetter": "R"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/信达生物.png',
			'name':'信达生物',
			"firstLetter": "X"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/先声再明.png',
			'name':'先声再明',
			"firstLetter": "S"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/君实.png',
			'name':'君实生物',
			"firstLetter": "S"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/地奥天府.png',
			'name':'地奥天府',
			"firstLetter": "D"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/康方生物.png',
			'name':'康方生物',
			"firstLetter": "K"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/康辉生物.png',
			'name':'康惠生物',
			"firstLetter": "K"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/恒瑞.png',
			'name':'恒瑞',
			"firstLetter": "H"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/正大天晴.png',
			'name':'正大天晴',
			"firstLetter": "Z"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/海杰亚.png',
			'name':'海杰亚',
			"firstLetter": "H"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/燃石医学.png',
			'name':'燃石医学',
			"firstLetter": "R"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/百济神州.png',
			'name':'百济神州',
			"firstLetter": "B"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/科伦.png',
			'name':'科伦药业 | 科伦博泰',
			"firstLetter": "K"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/艾力斯.png',
			'name':'艾力斯',
			"firstLetter": "A"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/豪森药业.png',
			'name':'豪森药业',
			"firstLetter": "H"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/贝达药业.png',
			'name':'贝达药业',
			"firstLetter": "B"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/迪哲.png',
			'name':'迪哲',
			"firstLetter": "D"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/主会场/未标题-1.jpg',
			'name':'强生',
			"firstLetter": "Q"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/齐鲁制药.png',
			'name':'齐鲁制药',
			"firstLetter": "Q"
		},{
			'img':'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/enterpriseImg/逸思医疗.png',
			'name':'逸思医疗',
			"firstLetter": "Y"
		}
	])
	
	
	// 分组计算属性
	const groupedExperts = computed(() => {
	  const groups = {};
	  const result = [];
	  
	  logoData.value.forEach(item => {
	    const letter = item.firstLetter;
	    if (!groups[letter]) {
	      groups[letter] = {
	        letter,
	        items: []
	      };
	      result.push(groups[letter]);
	    }
	    groups[letter].items.push(item);
	  });
	  
	  // 按字母排序
	  return result.sort((a, b) => a.letter.localeCompare(b.letter));
	});
	
	// 返回
	const handleNavBarBack = () => {
		uni.navigateBack();
	}

	const openFun = (index) => {
		uni.navigateTo({url: `/pages/expert/expertDetails?expertId=${index}`})
	}
	
	//分享函数
	const getWin =  async () => { 
		 const currentUrl = 'https://www.yunyakeji.top/';
		
		 // 请求后端获取签名配置
		const res = await vk.callFunction({
			url: 'client/token/pub/index',
			data: { url: currentUrl } // 传递当前URL
		});
		
		const config = res;
		console.log('config',config)
		// 初始化微信SDK
		jWeixin.config({
			debug: false,
			appId: config.appId,
			timestamp: config.timestamp,
			nonceStr: config.noncestr,
			signature: config.signature,
			jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData','onMenuShareAppMessage','onMenuShareTimeline']
		});
		
		jWeixin.ready(() => {
		    // 自定义“分享给朋友”
			 const shareConfig = {
				title: '2025天津市第四届海河肺癌诊疗新进展学术会议',
				desc: '会议日期：6月21日～22日，会议场地：天津梅江中心皇冠假日酒店', // 分享描述
				link: currentUrl, // 使用当前URL
				imgUrl: 'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/WechatIMG192.webp', // 分享图标
			};
			
		    jWeixin.updateAppMessageShareData(shareConfig);
		
		    // 自定义“分享到朋友圈”
		    jWeixin.updateTimelineShareData(shareConfig);
			
			// 兼容旧版API
			  jWeixin.onMenuShareAppMessage(shareConfig);
			  
			  jWeixin.onMenuShareTimeline(shareConfig);
		});
		
		jWeixin.error(err => {
			console.error('微信SDK初始化失败', err);
		});
	}
	
	onLoad(() => {
		getWin()
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		max-width: 750px;
		height: 100vh;
		background: no-repeat center bottom;
		background-size: auto 100%;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin: 0 auto;
		background-color: #F9FAFB;
		

		.header {
			width: 100%;
			height: 112rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 36rpx;
			color: #111827;
			
			
		}
		
		.my-service-title {
			width: 54rpx;
			height: 54rpx;
			background: rgba(24, 31, 67, 0.16);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 30rpx;
			left: 30rpx;
			z-index: 99;
		}

		.card{
			width: 100%;
			flex: 1;
			overflow-y: auto;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			
			.letter-header{
				width: 100%;
				height: 50rpx;
				font-family: Roboto, Roboto;
				font-weight: 700;
				font-size: 35rpx;
				color: #1F2937;
				line-height: 49rpx;
				margin-bottom: 26rpx;
				
				.text{
					font-size: 22rpx;
					color: #b9b9b9;
					font-weight: 500;
				}
			}
			
			.list{
				width: 100%;
				height: auto;
				display: flex;
				flex-wrap: wrap;
				gap: 28rpx;
				flex: 1 1;
				margin-bottom: 56rpx;
				
				.item{
					flex: 1;
					max-width: calc(50% - 14rpx);
					min-width: calc(50% - 14rpx);
					background-color: #fff;
					padding: 28rpx 0 0;
					box-sizing: border-box;
					border-radius: 10rpx;
					
					&.itmeAi{
						max-width: 100%;
						min-width: 100%;
					}
					
					.img{
						width: 100%;
						max-width: 100%;
						height: 140rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						overflow: hidden;
						margin-bottom: 22rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 50rpx;
						color: #111827;
						font-weight: bold;
						padding: 0 28px;
						box-sizing: border-box;
					}
					
					.name{
						width: 100%;
						height: auto;
						font-family: Roboto, Roboto;
						font-weight: 600;
						font-size: 28rpx;
						color: #fff;
						line-height: 35rpx;
						text-align: center;
						background: linear-gradient( 270deg, #0542D7 0%, #4F46E5 100%), rgba(0,0,0,0);
						padding: 10rpx 0;
					}
				}
			}
		}
	}
</style>